<div ng-controller="horizon.app.core.images.table.ImagesController as table">
<hz-page-header header="{$ 'Images' | translate $}"></hz-page-header>
<table hz-table ng-cloak
       st-table="table.images"
       st-safe-src="table.imagesSrc"
       default-sort="name"
       default-sort-reverse="false"
       class="table table-striped table-rsp table-detail">
  <thead>
    <tr>
      <!--
        Table-batch-actions:
        This is where batch actions like searching, creating, and deleting.
      -->
      <th colspan="100" class="search-header">
        <hz-search-bar group-classes="input-group" icon-classes="fa-search">
          <actions allowed="table.imageResourceType.batchActions" type="batch"
              result-handler="table.actionResultHandler"></actions>
        </hz-search-bar>
      </th>
    </tr>

    <tr>
      <!--
        Table-column-headers:
        This is where we declaratively define the table column headers.
        Include select-col if you want to select all.
        Include expander if you want to inline details.
        Include action-col if you want to perform actions.
      -->
      <th class="multi_select_column">
        <div class="themable-checkbox">
          <input id="images-multi-select" type="checkbox" hz-select-all="table.images">
          <label for="images-multi-select"></label>
        </div>
      </th>

      <th class="expander"></th>

      <th class="rsp-p1" st-sort="name" st-sort-default="name" translate>Image Name</th>
      <th class="rsp-p1" st-sort="type" translate>Type</th>
      <th class="rsp-p1" st-sort="status" translate>Status</th>
      <th class="rsp-p2" st-sort="filtered_visibility" translate>Visibility</th>
      <th class="rsp-p2" st-sort="protected" translate>Protected</th>
      <th class="rsp-p2" st-sort="disk_format" translate>Format</th>
      <th class="rsp-p2" st-sort="size" translate>Size</th>
      <th class="actions_column" translate>Actions</th>
    </tr>
  </thead>

  <tbody>
    <!--
      Table-rows:
      This is where we declaratively define the table columns.
      Include select-col if you want to select all.
      Include expander if you want to inline details.
      Include action-col if you want to perform actions.
      rsp-p1 rsp-p2 are responsive priority as user resizes window.
    -->
    <tr ng-repeat-start="image in table.images">

      <td class="multi_select_column">
        <div class="themable-checkbox">
          <input type="checkbox"
                 id="images-{$ image.id $}"
                 ng-model="tCtrl.selections[image.id].checked"
                 hz-select="image">
          <label for="images-{$ image.id $}"></label>
        </div>
      </td>
      <td class="expander">
        <span class="fa fa-chevron-right"
           hz-expand-detail
           duration="200">
        </span>
      </td>
      <td class="rsp-p1"><a ng-href="{$ 'project/ngdetails/' + table.imageResourceType.type + '/' + table.imageResourceType.pathGenerator(image.id) $}">{$ image.name $}</a></td>
      <td class="rsp-p1">{$ image | imageType $}</td>
      <td class="rsp-p1">{$ image.status | imageStatus $}</td>
      <td class="rsp-p2">{$ image.filtered_visibility $}</td>
      <td class="rsp-p2">{$ image.protected | yesno $}</td>
      <td class="rsp-p2">{$ image.disk_format | noValue | uppercase $}</td>
      <td class="rsp-p2">{$ image.size | bytes $}</td>

      <td class="actions_column">
        <!--
        Table-row-action-column:
        Actions taken here applies to a single item/row.
        -->
        <actions allowed="table.imageResourceType.itemActions" type="row" item="image"
            result-handler="table.actionResultHandler">
        </actions>
      </td>
    </tr>

    <tr ng-repeat-end class="detail-row">
      <!--
        Detail-row:
        Contains detailed information on this item.
        Can be toggled using the chevron button.
        Ensure colspan is greater or equal to number of column-headers.
      -->
      <td class="detail" colspan="100">
        <!--
          The responsive columns that disappear typically should reappear here
          with the same responsive priority that they disappear.
          E.g. table header with rsp-p2 should be here with rsp-alt-p2
        -->
        <div class="row">
          <span class="rsp-alt-p2">
            <dl class="col-sm-2">
              <dt translate>Visibility</dt>
              <dd>{$ image.filtered_visibility $}</dd>
            </dl>
            <dl class="col-sm-2">
              <dt translate>Protected</dt>
              <dd>{$ image.protected | yesno $}</dd>
            </dl>
            <dl class="col-sm-2">
              <dt translate>Format</dt>
              <dd>{$ image.disk_format | noValue | uppercase $}</dd>
            </dl>
            <dl class="col-sm-2">
              <dt translate>Size</dt>
              <dd>{$ image.size | bytes $}</dd>
            </dl>
          </span>
        </div>

        <div class="row">
          <dl class="col-sm-2">
            <dt translate>Min Disk (GB)</dt>
            <dd>{$ image.min_disk | noValue $}</dd>
          </dl>
          <dl class="col-sm-2">
            <dt translate>Min RAM (MB)</dt>
            <dd>{$ image.min_ram | noValue $}</dd>
          </dl>
        </div>

        <div class="row" ng-if="table.metadataDefs && image.properties">
          <div class="col-sm-12">
            <metadata-display
                available="::table.metadataDefs"
                existing="::image.properties">
            </metadata-display>
          </div>
        </div>

      </td>
    </tr>

    <tr hz-no-items items="table.images"></tr>

  </tbody>
  <!--
    Table-footer:
    This is where we display number of items and pagination controls.
  -->
  <tfoot hz-table-footer items="table.images"></tfoot>

</table>
</div>
